<template>
  <div id="realTimeDataList">
    <div class="title">设备列表</div>
    <div>
      <el-row :gutter="15">
        <el-col :span="5">
          <el-input style="width: 100%"
                    v-model="sn"
                    placeholder="请输入编号"></el-input>
        </el-col>
        <el-col :span="5">
          <el-input style="width: 100%"
                    v-model="name"
                    placeholder="请输入名称"></el-input>
        </el-col>
        <el-col :span="8">
          <div style="text-align: right">
            <el-button type="primary"
                       style="margin-right: 15px"
                       @click="searchClick">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="btnBox">
      <span v-for="(item, index) in list"
            :key="index"
            @click="btnClick(index,item.type)"
            :class="key == index ? 'Select' : 'Unchecked'">{{ item.name }}</span>
    </div>
    <div style="margin-top: 30px">
      <el-table :data="tableData"
                border
                style="width: 100%"
                :header-cell-style="{ background: '#F6F7F8' }">
        <el-table-column type="index"
                         label="序号"
                         fixed="left"
                         width="60"
                         align="center">
        </el-table-column>
        <el-table-column prop="sn"
                         label="编号"
                         fixed="left"
                         width="200"
                         align="center"></el-table-column>
        <el-table-column prop="name"
                         label="设备名称"
                         width="180"
                         align="center"></el-table-column>
        <el-table-column prop="i1"
                         label="加热电流"
                         align="center"></el-table-column>
        <el-table-column prop="i2"
                         label="搅拌电流"
                         align="center"></el-table-column>
        <el-table-column prop="i3"
                         label="风扇电流"
                         align="center"></el-table-column>
        <el-table-column prop="i4"
                         label="推杆电流"
                         align="center"></el-table-column>
        <el-table-column prop="k1"
                         label="有人探测"
                         align="center">
          <template slot-scope="scope"
                    align="center">
            <span>{{scope.row.k1 == 0 ? '无人' : '有人'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ht1"
                         label="连续加热时间"
                         align="center"></el-table-column>
        <el-table-column prop="jt1"
                         label="连续搅拌时间"
                         align="center"></el-table-column>
        <el-table-column prop="ft1"
                         label="连续风扇时间"
                         align="center"></el-table-column>
        <el-table-column prop="tt1"
                         label="连续推杆时间"
                         align="center"></el-table-column>
        <el-table-column prop="kt1"
                         label="连续探测时间"
                         align="center"></el-table-column>

        <el-table-column prop="ht2"
                         label="连续不加热时间"
                         align="center"></el-table-column>
        <el-table-column prop="jt2"
                         label="连续不搅拌时间"
                         align="center"></el-table-column>
        <el-table-column prop="ft2"
                         label="连续不风扇时间"
                         align="center"></el-table-column>

        <el-table-column prop="ef"
                         label="其他故障"
                         align="center">
          <template slot-scope="scope"
                    align="center">
            <span>{{efList[scope.row.ef]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state"
                         fixed="right"
                         label="状态"
                         width="150"
                         align="center">
          <template slot-scope="scope"
                    align="center">
            <span>{{typeList[scope.row.s]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { realdatas } from '../../api/index'
export default {
  data() {
    return {
      list: [
        {
          name: '全部',
          type: '',
        },
        {
          name: '停止',
          type: '0',
        },
        {
          name: '运行中',
          type: '1',
        },
      ],
      key: 0,
      headClass: 'background:#F6F7F8',
      sn: '',
      name: '',
      tableData: [],
      efList: ['无故障', '推杆-探测未联动', '搅拌-探测未联动'],
      typeList: [
        '停止',
        '运行',
        '加热电流',
        '搅拌电流',
        '风扇电流',
        '推杆电流',
        '连续加热时间',
        '连续搅拌时间',
        '连续风扇时间',
        '连续推杆时间',
        '连续探测时间',
        '连续不加热时间',
        '连续不搅拌时间',
        '连续不吹风时间',
      ],
      type: '',
      timer: undefined,
    }
  },
  mounted() {
    this.getData()
    this.timer = setInterval(() => {
      this.getData()
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      realdatas({
        sn: this.sn,
        name: this.name,
        status: this.type,
      }).then((res) => {
        this.tableData = res.data
      })
    },
    btnClick(index, type) {
      this.key = index
      this.type = type
      this.getData()
    },
    //查询
    searchClick() {
      this.getData()
    },
    //重置
    reset() {
      this.sn = ''
      this.name = ''
      this.getData()
    },
  },
}
</script>

<style scoped>
#realTimeDataList {
  padding: 40px;
}
.title {
  color: #202224;
  border-left: 3px solid #4a76ff;
  padding-left: 9px;
  margin-bottom: 30px;
}
.Select {
  padding: 7px 20px;
  background: #4379ee;
  color: #fff;
  cursor: pointer;
  margin: 0 5px;
}
.Unchecked {
  padding: 7px 20px;
  color: #595959;
  cursor: pointer;
  margin: 0 5px;
}
.btnBox {
  margin-top: 30px;
}
</style>